import React, { Component } from 'react';
import { HashRouter, withRouter } from 'react-router-dom';
import store from './store';
import { $http } from './containers/config/https';
import { httpConfig } from './containers/config/httpConfig';
// 左侧导航栏
import Menus from './containers/menus/Index.jsx';
// center上的导航小标题
import CustomBreadcrumb from './components/customBreadcrumb/Index.jsx';
// 页面
import Routers from './routers/Index.jsx';
import PropTypes from 'prop-types';
//切换登录角色
import ChangeRoles from './pages/userCenter/ChangeRoles.jsx';
//个人信息
import UserInfomation from './pages/userCenter/UserInfomation.jsx';
//排班设置
import ShiftSettings from './pages/userCenter/ShiftSettings.jsx';
import DownloadTask from './pages/userCenter/DownloadTask.jsx';
//医生站配置
import ShowWorkStationSettingPage from 'pages/workstation/ShowWorkStationSettingPage';
import MessBox from './pages/MessagePlatform/MessBox.jsx';
import logo1 from 'assets/images/side-menu-max-logo.png';
import logo2 from 'assets/images/side-menu-min-logo.png';
import headLogo from 'assets/images/pr-login-logo2.png';
import menuFold from 'assets/images/rongke-menu-fold.png';
import headTeam from 'assets/images/head-team.png';
import sideNotification from 'assets/images/side-notification.png';
import sideTeam from 'assets/images/side-team.png';
import headerBg from 'assets/images/header-bg.png';
import qrCode from 'assets/images/itDeptLogo.png';
import headHelp from 'assets/images/header-help.png';
import headSet from 'assets/images/header-set.png';
import headSet2 from 'assets/images/header-set2.png';
import headUser from 'assets/images/header-user.png';
import headUser2 from 'assets/images/header-user2.png';
import {
    ConfigProvider,
    Layout,
    Icon,
    Input,
    Dropdown,
    Menu,
    Modal,
    message,
    Divider, Row, Col, Tooltip,
} from 'antd';

import 'antd/dist/antd.css';
import './assets/css/App.css';
import zhCN from 'antd/es/locale/zh_CN'; //中文
import enUS from 'antd/es/locale/en_US'; //英文
import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

const { Header, Content, Sider } = Layout;
var _beforeUnload_time = 0,
  _gap_time = 0;
var is_fireFox = navigator.userAgent.indexOf("Firefox") > -1; //是否是火狐浏览器

//自定义组件SiderDemo
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {},
      userIp: "",
      collapsed: false,
      // 加载的菜单是头菜单(header)还是测菜单(broadside)
      defaultMenuType: 2,
      defaultLanguage: "CN",
      menusData: [],
      routerData: [],
      compileMune: false,
      tabs: [{
        component: "pages/header/Index.jsx",
        path: "/001",
        title: "首页"
      }],
      tabTemp: {},
      activeKey: "首页",
      windowWidth: 0,
      showMessage: false,
      messageCount: 0,
    };
    this.addSubMenuTabData = this.addSubMenuTabData.bind(this);
    this.deleteSubMenuTabData = this.deleteSubMenuTabData.bind(this);
    this.setActiveKey = this.setActiveKey.bind(this);
    this.gotoMeunTabByActiveKey = this.gotoMeunTabByActiveKey.bind(this);
    this.resetTabs = this.resetTabs.bind(this);
  }

  componentDidMount() {
    // console.log("httpConfig",httpConfig)
    this.initData();
    // this.onWindowResize(); // 获取当前屏幕大小
    // 当窗口发生改变的时候
    // window.addEventListener('resize', this.onWindowResize)
    this.getMoreEdit();
    window.addEventListener("unload", this.handleUnload);
    window.addEventListener("beforeunload", this.handleBeforeunload);
    /*** 默认把首页加进去 */
    let tabTemp = this.state.tabTemp;
    if (!tabTemp["首页"]) {
      tabTemp["首页"] = {
        component: "pages/header/Index.jsx",
        path: "/001",
        title: "首页",
        $Index: 0
      };
    }
    this.getLogo();
  }

  componentWillUnmount() {
    // 组件销毁前清除监听
    // window.addEventListener('resize', this.onWindowResize)
    window.removeEventListener("unload", this.handleUnload);
    window.removeEventListener("beforeunload", this.handleBeforeunload);
    this.setState = (state, callback) => {
      return;
    };
  }

  // 获取项目logo
  getLogo = () => {
    var data = {
      params: [{
        fileName: "head-menu-logo.png"
      }]
    }

    $http.post('urlDeault', this, {
      code: "01040214",
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          let imgUrl = ''
          if (res.result) {
            imgUrl = `${res.result}`
          } else {

          }
          this.setState({
            // imgUrl:imgUrl&&imgUrl||headLogo,
            imgUrl: headLogo,
          })
        } else {
          this.setState({
            imgUrl: headLogo
          })
        }
      },
      error: function (res) {
        this.setState({
          imgUrl: headLogo
        })
      }
    });

    //侧边
    var dataOne = {
      params: [{
        fileName: "side-menu-max-logo.png"
      }]
    }

    $http.post('urlDeault', this, {
      code: "01040214",
      data: dataOne,
      success: function (res) {
        if (+res.errorCode === 0) {
          let backLogo = ""
          if (res.result) {
            backLogo = `${res.result}`
          } else {
          }
          this.setState({
            backImgUrl: backLogo && backLogo || logo1,
          })
        } else {
          this.setState({
            backImgUrl: logo1
          })
        }
      }, error: function (res) {
        this.setState({
          backImgUrl: logo1,
        })
      }
    });

    var dataTwo = {
      params: [{
        fileName: "side-menu-min-logo.png"
      }]
    }

    $http.post('urlDeault', this, {
      code: "01040214",
      data: dataTwo,
      success: function (res) {
        if (+res.errorCode === 0) {
          let backMinLogo = ""
          if (res.result) {
            backMinLogo = `${res.result}`
          } else {
          }
          this.setState({
            backMinLogo: backMinLogo && backMinLogo || logo2,
          })

        } else {
          this.setState({
            backMinLogo: logo2
          })
        }
      }, error: function (res) {
        this.setState({
          backMinLogo: logo2,
        })
      }
    });
  }

  initData = () => {
    let user = React.$getSessionData();
    this.setState({
      user,
      defaultLanguage: user && user.language ? user.language : this.state.defaultLanguage,
      defaultMenuType: user && user.defaultMenuType ? user.defaultMenuType : this.state.defaultMenuType,
      windowWidth: window.innerWidth
    }, () => {
      // 初始化高度
      this.handelHeight();
      this.getMenuData();
      this.getRouterData();
      // this.props.getLanguage(this.state.defaultLanguage)
      document.title = user && user.groupDesc ? user.groupDesc : "普瑞眼科HIS"; // 修改项目title

      if (!this.state.defaultLanguage == "EN") {
        moment.locale('en');
      } else {
        moment.locale('zh-cn');
      }
    });
  };

  // 监听屏幕大小变化
  // onWindowResize = (e) => {
  //     console.log(window.innerWidth)
  //     this.setState({windowWidth: window.innerWidth});
  // }

  // 同步请求退出登录接口
  callingInterface = () => {
    let url = httpConfig.ipDeault + httpConfig.urlAddress;
    var xml = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
    let json = {
      params: [{}]
    };
    let formData = Object.assign({}, json);
    let { userData } = window.sessionStorage;
    formData.code = "01040069";
    if (userData) {
      let user = JSON.parse(userData);
      let ip = React.$getSessionData('ipConfig');
      formData.session = [{
        userID: user.userID || '',
        locID: user.locID || '',
        groupID: user.groupID || '',
        hospID: user.hospID || '',
        sessionID: user.sessionID || '',
        hostName: ip?.hostName || '',
        ipv4: ip?.ipv4 || '',
        ipv6: ip?.ipv6 || '',
        mac: ip?.mac || ''
      }];
    }

    xml.open("POST", "http://" + url, false);
    xml.setRequestHeader("content-type", "application/json");
    xml.setRequestHeader("Authorization", httpConfig.authorizationToken);
    xml.setRequestHeader("Access-Control-Allow-Origin", httpConfig.ipDeault);
    xml.setRequestHeader("Accept", "application/json");
    xml.send(JSON.stringify(formData));

    xml.onreadystatechange = () => {
      if (xml.readyState == 4 && xml.status == 200) {
        var data = xml.responseText;
        console.log(data);
      } else {
        console.log(xml.status);
        // error&&error(xml.status);
      }
    };
  };

  handleUnload = () => {
    _gap_time = new Date().getTime() - _beforeUnload_time;
    if (_gap_time <= 5) {
      this.callingInterface();
      for (let i = 1; i < 10000; i++) {
        for (let m = 1; m < 10000; m++) {
          continue;
        }
      }
    } else {
      console.info("你正在刷新页面");
    }
  };

  handleBeforeunload = () => {
    _beforeUnload_time = new Date().getTime();
    if (is_fireFox) {
      //火狐关闭执行
      this.callingInterface();
      for (let i = 1; i < 10000; i++) {
        for (let m = 1; m < 10000; m++) {
          continue;
        }
      }
    }
  };

  // 获取menu数据
  getMenuData = () => {
    this.setState({
      user: React.$getSessionData()
    }, () => {
      let { user } = this.state;
      let { defaultMenuType } = this.state;
      let data = {
        params: [{
          // 角色ID：groupDr
          GroupDr: user && user.groupID ? +user.groupID : "",
          // 菜单类型
          Type: defaultMenuType,
          // 科室id
          LocDr: user && user.locID ? +user.locID : ""
        }]
      };
      $http.post("urlS", this, {
        code: "3001",
        data: data,
        success: function (res) {
          // console.log(res)
          if (+res.errorCode === 0) {
            this.setState({ menusData: res.result }, () => {
              this.state.compileMune ? this.child.compileMuneType() : "";
              this.child.compileShowLoading();
            });
          } else {
            this.setState({ menusData: [] });
          }
        },
        error: function () {
          this.setState({ menusData: [] });
        }
      });
    });
  };

  // 获取路由数据
  getRouterData = () => {
    this.setState({
      user: React.$getSessionData()
    }, () => {
      window.sessionStorage.setItem(
        "userData",
        JSON.stringify({
          ...React.$getSessionData(),
          defaultMenuType: this.state.defaultMenuType,
          language: this.state.defaultLanguage || "CN",
          langDesc: this.state.defaultLanguage == "EN" ? "英文" : "简体中文",
          langID: this.state.defaultLanguage == "EN" ? "2" : "1"
        })
      );
      let { user } = this.state;
      let { defaultMenuType } = this.state;
      let data = {
        params: [{
          // 角色ID：groupDr
          GroupDr: user && user.groupID ? +user.groupID : "",
          // 菜单类型
          Type: defaultMenuType,
          // 科室id
          LocDr: user && user.locID ? +user.locID : ""
        }]
      };
      $http.post("urlS", this, {
        code: "3002",
        data: data,
        success: function (res) {
          if (+res.errorCode === 0) {
            store.dispatch({
              type: "routerData",
              value: res.result
            });
            this.setState({ routerData: res.result });
          } else {
            this.setState({ routerData: [] });
          }
        }
      });
    });
  };

  // 点击控制左侧菜单伸缩
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed
    });
  };

  // 点击切换头/侧菜单
  triggerHeaderMenu = defaultMenuType => {
    this.setState({ defaultMenuType: defaultMenuType == 1 ? 2 : 1, compileMune: true }, () => {
      // 初始化高度
      this.handelHeight();
      this.getMenuData();
      this.getRouterData();
    });
  };

  // 按下回车的回调
  handleOnPressEnter = e => {
    // e.target.value为回车后输入框当中的内容
    // 调用子组件当中的查询方法并且将查询参数传过去
    this.child.filtrateMenuData(e.target.value);
  };

  // 当输入框失去焦点时触发
  handleOnBlur = e => {
    this.child.filtrateMenuData(e.target.value);
  };

  // 调用子组件的连接事件
  onRef = ref => {
    this.child = ref;
  };

  handelHeight() {
    var s = document.body.clientHeight;
    let header = +this.state.defaultMenuType === 2 ? 50 + 40 + 10 : 48 + 22;
    let tableHeight = s - header - 241;
    store.dispatch({
      type: "compileY",
      value: tableHeight
    });
  }

  // 退出登录
  handleWindowClose = flag => {
    let user = React.$getSessionData();
    if (!(user && user.sessionID)) {
      let history = this.context.router.history;
      history.push("/Login");
      store.dispatch({
        type: "breadcrumDeleteArr"
      });
      return;
    }
    // this.callingInterface()
    let data = {
      params: [{}]
    };
    $http.post("urlADS", this, {
      code: "01040069",
      data: data,
      success: function (res) {
        if (flag === "click") {
          // window.close()
          // 清空sessionStorage里面的值并且跳转到登录界面
          let history = this.context.router.history;
          history.push("/Login");
          sessionStorage.clear();
          if (localStorage.getItem('province') != null) {
            localStorage.removeItem("province");
          } if (localStorage.getItem('city') != null) {
            localStorage.removeItem("city");
          }
          store.dispatch({
            type: "breadcrumDeleteArr"
          });
        }
      }
    });
  };

  //调用子组件 切换登录
  Onrefs = ref => {
    this.childs = ref;
  };

  //调用子组件 个人中心
  OnChildrefs = ref => {
    this.childInfo = ref;
  };

  //点击 切换登陆角色
  handleOpenChangeRoles = () => {
    window.sessionStorage.setItem('accountType', '');
    this.childs.showModals();
    this.childInfo.handleCancel();
  };

  //点击切换中英文
  handleLanguage = defaultLanguage => {
    this.setState({
      defaultLanguage: defaultLanguage == "CN" ? "EN" : "CN",
      compileMune: true
    }, () => {
      // window.sessionStorage.setItem("loginIsSession", 'Y');
      //取值需要 JSON.parse(userData);
      window.sessionStorage.setItem(
        "userData",
        JSON.stringify({
          ...React.$getSessionData(),
          language: this.state.defaultLanguage,
          langDesc: this.state.defaultLanguage == "EN" ? "英文" : "简体中文",
          langID: this.state.defaultLanguage == "EN" ? "2" : "1"
        })
      );
      // this.props.getLanguage(this.state.defaultLanguage)
      // 初始化高度
      this.handelHeight();
      this.getMenuData();
      this.resetTabs();
      this.getRouterData();
      this.child.clearData();
      this.getMoreEdit();
    });
  };

  //点击 个人信息
  handleViewInfo = () => {
    // console.log("this.child",this.child)
    this.childInfo.showModal();
    this.childs.handleCancel();
  };

  /** 添加、收集点击菜单需要打开的tab页 并存储在list */
  addSubMenuTabData = tabItem => {
    const tabList = this.state.tabs;
    let tabTemp = this.state.tabTemp;
    if (!tabTemp[tabItem.title]) {
      tabList.push(tabItem);
      this.setState({
        tabs: tabList,
        activeKey: tabItem.title
      });
      tabItem.$Index = tabList.length - 1;
      tabTemp[tabItem.title] = tabItem;
    } else {
      let index = tabTemp[tabItem.title].$Index;
      tabList[index].Paras = tabItem.Paras; /**tab页已打开，重新赋值参数即可 */
      this.setState({
        activeKey: tabList[index].title
      });
    }
  };

  /**重置tabs，回到原始状态 */
  resetTabs = () => {
    this.setState({
      tabs: [{
        component: "pages/header/Index.jsx",
        path: "/001",
        title: "首页"
      }],
      tabTemp: {},
      activeKey: "首页"
    });
    let tabTemp = this.state.tabTemp;
    if (!tabTemp["首页"]) {
      tabTemp["首页"] = {
        component: "pages/header/Index.jsx",
        path: "/001",
        title: "首页",
        $Index: 0
      };
    }
  };

  /**
   * 指定跳转到某个标签页
   */
  gotoMeunTabByActiveKey = activeKey => {
    this.setState({ activeKey });
  };

  /** 删除tab页 */
  deleteSubMenuTabData = (targetKey, gotoKey) => {
    let { activeKey } = this.state;
    let lastIndex;
    this.state.tabs.forEach((pane, i) => {
      if (pane.title === targetKey) {
        lastIndex = i - 1;
      }
    });
    const tabList = this.state.tabs.filter(tab => tab.title !== targetKey);
    if (this.state.tabs.length && activeKey === targetKey) {
      if (lastIndex >= 0) {
        activeKey = this.state.tabs[lastIndex].title;
      } else {
        activeKey = this.state.tabs[0].title;
      }
    }
    if (gotoKey) {
      activeKey = gotoKey;
    }
    // this.setState({  });
    let tabTemp = this.state.tabTemp;
    delete tabTemp[targetKey];
    this.setState({ tabTemp: tabTemp, activeKey, tabs: tabList });
  };

  // 根据头部导航选中的标签页关联上菜单选中
  QueryIDAccordingToTitle = (activeKey) => {
    let arr = this.state.routerData;
    let ID = "";
    for (var i = 0; i < arr.length; i++) {
      if (arr[i].title === activeKey) {
        ID = arr[i].ID
        break;
      }
    }
    return ID
  }

  setActiveKey = activeKey => {
    let obj = {
      key: this.QueryIDAccordingToTitle(activeKey)
    }
    this.setState({
      activeKey: activeKey
    }, () => {
      this.child.handleOnClickMenu(obj)
    });
  };

  // 消息列表
  showMessage = () => {
    this.messageRef.show();
  };

  onMessageRef = ref => {
    this.messageRef = ref;
  };

  //右上操作国际化
  getMoreEdit = () => {
    let data = {
      params: [{
        compontName: "MoreEdit",
        type: "C",
        reactCode: ['MoreEdit']
      }]
    }
    $http.post('urlDeault', this, {
      code: "01040073",
      data: data,
      success: (res) => {
        if (+res.errorCode === 0) {
          let userData = JSON.parse(sessionStorage.getItem('userData'))
          this.setState({
            localeProvider: userData.language == 'EN' ? res.result.language.EN : res.result.language.CN,
          })
        }
      }
    })
  }

  onRefShiftSetting = (ref) => {
    this.onChildShiftSetting = ref
  }

  //国际化
  setMessage(name, message) {
    return this.state.localeProvider && this.state.localeProvider[name] ? this.state.localeProvider[name][message] : ''
  }

  //下载操作手册
  handleDown = () => {
    message.success("开发中....")
  }

  //医生站弹框
  handleWorkStation() {
    this.onStationRef.showModal()
  }

  onRefStation = (ref) => {
    this.onStationRef = ref
  }

  handleDownloadTaskClick = () => {
    this.downloadTaskRef && this.downloadTaskRef.modifyVisible(true);
  }

  render() {
    let { user, defaultMenuType, defaultLanguage, imgUrl } = this.state;
    const menu = (
      <Menu className="personage-menu">
        <Menu.ItemGroup>
          <Menu.Item onClick={this.handleViewInfo}>
            <span>{this.state.localeProvider && this.state.localeProvider.MoreEditPersonalCenter ? this.setMessage('MoreEditPersonalCenter', 'descripts') : "个人设置"}</span>
          </Menu.Item>
          <Divider style={{ margin: "4px 0" }} />
          <Menu.Item onClick={() => this.onChildShiftSetting.showModal()}>
            <span>{this.state.localeProvider && this.state.localeProvider.MoreEditShiftSetting ? this.setMessage('MoreEditShiftSetting', 'descripts') : "排班设置"}</span>
          </Menu.Item>
          <Divider style={{ margin: "4px 0" }} />
          <ShiftSettings ref={this.onRefShiftSetting}></ShiftSettings>
          <ShowWorkStationSettingPage onRef={this.onRefStation}></ShowWorkStationSettingPage>
          <Menu.Item onClick={() => this.triggerHeaderMenu(defaultMenuType)}>
            <span>
              {defaultMenuType && defaultMenuType == 1 && this.state.localeProvider && this.state.localeProvider.MoreEditSwitchToSideMenu ?
                this.setMessage('MoreEditSwitchToSideMenu', 'descripts')
                : (defaultMenuType && defaultMenuType == 2 && this.state.localeProvider && this.state.localeProvider.MoreEditSwitchToTheHeadMenu ?
                  this.setMessage('MoreEditSwitchToTheHeadMenu', 'descripts') : "")}
            </span>
          </Menu.Item>
          <Divider style={{ margin: "4px 0" }} />
          <Menu.Item onClick={() => this.handleLanguage(defaultLanguage)}>
            <span
              style={{ cursor: "pointer" }}
            >
              {
                (defaultLanguage && defaultLanguage == "CN") || defaultLanguage == " " ?
                  (this.state.localeProvider && this.state.localeProvider.MoreEditLangEngDesc ?
                    this.setMessage('MoreEditLangEngDesc', 'descripts') : "切换到English") :
                  (this.state.localeProvider && this.state.localeProvider.MoreEditLangChDesc ? this.setMessage('MoreEditLangChDesc', 'descripts') : "切换到中文")
              }
            </span>
          </Menu.Item>
          <Divider style={{ margin: "4px 0" }} />
          <Menu.Item onClick={this.handleWorkStation.bind(this)}>
            <span>医生站配置</span>
          </Menu.Item>
          <Divider style={{ margin: "4px 0" }} />
          <Menu.Item onClick={() => this.handleWindowClose("click")}>
            <span>{this.state.localeProvider && this.state.localeProvider.MoreEditExitSystem ? this.setMessage('MoreEditExitSystem', 'descripts') : "退出系统"}</span>
          </Menu.Item>
          <Divider style={{ margin: "4px 0" }} />
          <span style={{ color: "#bfbfbf", margin: "0 0 4px 0" }}>
            {this.state.localeProvider && this.state.localeProvider.MoreEditLastLogin ? this.setMessage('MoreEditLastLogin', 'descripts') : "上次登录："}
            <span style={{ marginRight: "6px" }}>
              {sessionStorage.userData ? JSON.parse(sessionStorage.userData).lastLoginDate : "--"}
            </span>
            <span>
              {sessionStorage.userData ? JSON.parse(sessionStorage.userData).lastLoginTime : "--"}
            </span>
          </span>
        </Menu.ItemGroup>
      </Menu>
    );

    //扫码帮助窗口  createBY：DYK
    const helpModal = (
      <div>
        <Row gutter={[8, 8]}>
          <Col span={24} style={{ width: '280px', height: '525px', backgroundColor: '#fff', borderRadius: '5px', boxShadow: '5px 5px 5px #888888' }}>
            <Row>
              <Col span={24}>
                <img src={qrCode} style={{ width: '180px', height: '180px', marginTop: '20px', marginLeft: '50px' }} />
              </Col>
              <Col span={24} style={{ fontSize: '17px', marginLeft: '50px', marginTop: '5px' }}>
                <p style={{ color: '#7f7777', fontSize: '18px' }}>
                  打开飞书“扫一扫”
                </p>
                <p>
                  IT部门服务号<br />
                  -HIS问题<br />
                  -云HIS问题<br />
                  -自助服务<br />
                  -转人工服务
                </p>
                <p>
                  普瑞眼科（集团）<br />
                  数字化医院事业部<br />
                  提供技术支持
                </p>
                <span style={{ fontSize: '15px' }}>{httpConfig.HISVersion}</span>
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    );

    const avatar = (
      <Dropdown overlay={menu}>
        {/*<span style={{ cursor: "pointer" }}>*/}
        {/*  <span style={{ marginRight: "2px" }}>*/}
        {/*    {this.state.localeProvider && this.state.localeProvider.MoreEditSetting ? this.setMessage('MoreEditSetting', 'descripts') : "系统设置"}*/}
        {/*  </span>*/}
        {/*  <Icon type="caret-down" style={{ fontSize: "14px" }} />*/}
        {/*</span>*/}
        <img style={{width: "26px", height: "26px", marginRight: "20px"}} src={headSet}/>
      </Dropdown>
    );

    //添加飞书帮助  createBY：DYK
    const helpForFeishu = (
      <Dropdown overlay={helpModal}>
        {/*<span style={{ cursor: "pointer" }}>*/}
        {/*  <span style={{ marginRight: "2px", marginLeft: '10px' }}>*/}
        {/*    {this.state.localeProvider && this.state.localeProvider.MoreEditSetting ? this.setMessage('MoreEditSetting', 'descripts') : "帮助"}*/}
        {/*  </span>*/}
        {/*  <Icon type="caret-down" style={{ fontSize: "14px" }} />*/}
        {/*</span>*/}
        <img style={{width: "26px", height: "26px", marginRight: "20px"}} src={headHelp}/>
      </Dropdown>
    );

    let broadsideMenuDom = (
      <Layout className="broadside-menu-dom">
        <Sider
          trigger={null}
          collapsible
          collapsed={this.state.collapsed}
          width="240"
          className="left-dom">
          {!this.state.collapsed ? (
            <div className="backLogo">
              <span style={{ fontSize: "16px", marginLeft: "20px" }}>
                大健康管理平台
              </span>
            </div>
          ) : (<div className="backLogo"></div>)}

          <div className="sider-input">
            {/* autoFocus自动获取焦点的属性 */}
            <Input
              title="请输入检索内容"
              prefix={
                <Icon
                  type="search"
                  style={{
                    color: "rgba(162,174,177,1)",
                    marginLeft: "4px",
                    imeMode: "inactive"
                  }}
                />
              }
              placeholder="回车检索菜单内容"
              onBlur={this.handleOnBlur}
              onPressEnter={this.handleOnPressEnter}
            />
          </div>

          {/* 左侧导航  */}
          <Menus
            addSubMenuTabData={this.addSubMenuTabData}
            flag="broadside"
            menusData={this.state.menusData}
            routerData={this.state.routerData}
            onRef={this.onRef}
            style={{ lineHeight: "63px" }}
            defaultLanguage={this.state.defaultLanguage}
          />
        </Sider>
        <Layout>
          <Header
            style={{
              background: `url(${headerBg})`,
              padding: 0,
              height: "48px",
              lineHeight: "48px",
              position: "relative"
            }}
          >
            <img
              src={menuFold}
              className={!this.state.collapsed ? "menu-fold menu-fold-showtitle" : "menu-fold menu-fold-hiddentitle"}
              onClick={this.toggle}
            ></img>
            <div
              style={{
                display: "inline-block",
                color: "#666",
                marginLeft: "20px"
              }}
            >
              {user?.hospDesc || ''}
              <Divider type="vertical" />
              {user?.locDesc || ''}
              <Divider type="vertical" />
              {user?.userName || ''}
              <Divider type="vertical" />
            </div>
            <div style={{ float: 'right', marginTop: '2px' }}>
              <DownloadTask iconClick={this.handleDownloadTaskClick} renderFlag="icon" />
            </div>
            <div style={{ color: "#999", float: "right", marginRight: "4px" }}>
              {/*<img style={{ cursor: "pointer", width: "24px", height: "24px" }}*/}
              {/*  src={headTeam}*/}
              {/*  onClick={this.handleOpenChangeRoles}*/}
              {/*></img>*/}
              {/*<span style={{ color: "rgb(102, 102, 102)", cursor: "pointer", marginRight: "10px" }}*/}
              {/*  onClick={this.handleOpenChangeRoles}>*/}
              {/*  {this.state.localeProvider && this.state.localeProvider.MoreEditSwitchLoginRoles ? this.setMessage('MoreEditSwitchLoginRoles', 'descripts') : "切换角色"}*/}
              {/*</span>*/}
              <Tooltip title="切换角色">
                <img style={{width: "26px", height: "26px",marginLeft:"20px",marginRight: "20px" ,cursor:"pointer"}} src={headUser2} onClick={this.handleOpenChangeRoles}/>
              </Tooltip>

              {/*<img*/}
              {/*  style={{*/}
              {/*    cursor: "pointer", width: "14px",*/}
              {/*    height: "14px", background: "green",*/}
              {/*    marginRight: "3px", borderRadius: "2px"*/}
              {/*  }}*/}
              {/*  src={sideNotification}*/}
              {/*  onClick={this.showMessage}*/}
              {/*></img>*/}
              <MessBox position="left" />

              <Dropdown overlay={menu}>
                {/*<span style={{ cursor: "pointer" }}>*/}
                {/*  <span style={{ color: "rgb(102, 102, 102)", }}> {this.state.localeProvider && this.state.localeProvider.MoreEditSetting ? this.setMessage('MoreEditSetting', 'descripts') : "系统设置"}</span>*/}
                {/*  <Icon*/}
                {/*    type="caret-down"*/}
                {/*    style={{ fontSize: "14px", marginLeft: "4px" }}*/}
                {/*  />*/}
                {/*</span>*/}
                <img style={{width: "26px", height: "26px", marginRight: "0px"}} src={headSet2}/>
              </Dropdown>
            </div>
          </Header>
          {/* 面包屑 */}
          <div name="current_this_test" id="contents">
            <CustomBreadcrumb
              deleteSubMenuTabData={this.deleteSubMenuTabData}
              addSubMenuTabData={this.addSubMenuTabData}
              gotoMeunTabByActiveKey={this.gotoMeunTabByActiveKey}
              tabs={this.state.tabs}
              activeKey={this.state.activeKey}
              setActiveKey={this.setActiveKey}
            />
          </div>
        </Layout>
      </Layout>
    );
    let headerMenuDom = (
      <Layout
        style={{ width: "100%", height: "100%", lineHeight: "100%" }}
        className="header-menu-dom"
      >
        <Header style={{ marginBottom: "10px", zIndex: "1001", background: "#007AFF" }}>
          <div className="header-menu-logo" style={{ float: "left" }}>
            <img src={imgUrl && imgUrl} style={{ height: "42px", margin: "0 20px" }}/>
          </div>
          <div style={{ height: "100%" }}>
            <div
              style={{
                width: this.state.windowWidth < 1360 ? "70%" : "40%",
                height: "100%",
                display: "inline-block",
                overflow: "hidden"
              }}>
              <Menus
                flag="header"
                menusData={this.state.menusData}
                routerData={this.state.routerData}
                onRef={this.onRef}
                defaultLanguage={this.state.defaultLanguage}/>
            </div>
            <div className='flex-align-items' style={{ float: 'right', marginRight: '4px', color: '#fff' }}>
              {this.state.windowWidth >= 1360 ? (
                <div style={{display: 'inline-block', marginRight: '10px', color: '#fff'}}>
                  {user?.hospYBCode != '' ? user?.hospDesc + '(' + user?.hospYBCode + ')' : user?.hospDesc}
                  <Divider type="vertical" />
                  {user?.locDesc || ''}
                  <Divider type="vertical" />
                  {user?.userYBCode != '' ? user?.userName + '(' + user?.userYBCode + ')' : user?.userName}
                  <Divider type="vertical" />

                  {/*<img*/}
                  {/*  style={{ cursor: 'pointer', width: '15px', height: '15px', marginRight: '3px' }}*/}
                  {/*  src={sideTeam}*/}
                  {/*  onClick={this.handleOpenChangeRoles}*/}
                  {/*></img>*/}
                  {/*<span style={{ color: '#fff', cursor: 'pointer', marginRight: '10px' }} onClick={this.handleOpenChangeRoles}>*/}
                  {/*  {this.state.localeProvider && this.state.localeProvider.MoreEditSwitchLoginRoles ? this.setMessage('MoreEditSwitchLoginRoles', 'descripts') : "切换角色"}*/}
                  {/*</span>*/}
                  <Tooltip title="切换角色">
                    <img style={{width: "26px", height: "26px",marginLeft:"20px",marginRight: "20px" ,cursor:"pointer"}} src={headUser} onClick={this.handleOpenChangeRoles}/>
                  </Tooltip>

                  {/*<img*/}
                  {/*  style={{*/}
                  {/*    cursor: "pointer", width: "14px",*/}
                  {/*    height: "14px",*/}
                  {/*    marginRight: "3px", borderRadius: "2px"*/}
                  {/*  }}*/}
                  {/*  src={sideNotification}*/}
                  {/*  onClick={this.showMessage}*/}
                  {/*></img>*/}
                  <MessBox position="top" />
                </div>
              ) : ""}
              {avatar}
              {helpForFeishu}
              <DownloadTask iconClick={this.handleDownloadTaskClick} renderFlag="icon" />
            </div>
          </div>
        </Header>
        <Content
          style={{
            padding: "0 10px 10px 10px",
            width: "100%",
            height: "100%",
            overflow: "hidden"
          }}
        >
          {/* 面包屑 */}
          <div id="custom">{/* <CustomBreadcrumb /> */}</div>
          <div
            style={{
              background: "#fff",
              minHeight: 280,
              overflow: "auto",
              width: "100%",
              height: "100%",
              position: "relative"
            }}
          >
            {/* 内容区域的路由 */}
            <Routers routerData={this.state.routerData} />
          </div>
        </Content>
      </Layout>
    );

    //对外链接，不需要头、侧菜单
    let linkRouter = (
      <Routers routerData={this.state.routerData} />
    )

    let loadMenuDom = +this.state.defaultMenuType === 2 ? broadsideMenuDom : (this.state.defaultMenuType == '1' ? headerMenuDom : linkRouter);

    return (
      <ConfigProvider locale={this.state.defaultLanguage == "EN" ? enUS : zhCN}>
        <HashRouter>
          <div style={{ width: "100%", height: "100%" }} className='app-ant-layout'>
            {loadMenuDom}
            <ChangeRoles
              resetTabs={this.resetTabs}
              initData={this.initData}
              Onrefs={this.Onrefs}
            ></ChangeRoles>
            <UserInfomation OnChildrefs={this.OnChildrefs}></UserInfomation>
            <Modal
              footer={null}
              closable={false}
              visible={this.state.visible}
              wrapClassName="vertical-center-modal"
              onCancel={() => this.setState({ visible: false })}
              width={568}
            >
              <div style={{ width: "520px", height: "520px" }}>
                <img src="images/1c78c102.bg1.jpg" alt="" style={{ width: "520px", height: "520px" }} />
              </div>
            </Modal>
            <DownloadTask onRef={ref => this.downloadTaskRef = ref} />
          </div>
        </HashRouter>
      </ConfigProvider>
    );
  }
}

//输出组件
export default withRouter(App);

App.contextTypes = {
  router: PropTypes.object.isRequired
};
